<ion-content *ngIf="showRefresh" [scrollEvents]="false">
  <ng-container *ngIf="netState === 'wait ios net'; else elseTemplate">
    <img class="empty-img" src=" assets/icon/empty_no@3x.png" alt="">
    <p  class="empty-title">无法连接到网络</p>
    <p  class="empty-sub-title">请检查网络设置或稍后重试</p>
    <button class="empty-btn" appDebounceClick (debounceClick)="openNetSetting()">检查网络</button>  
  </ng-container>
  <ng-template #elseTemplate>
    <img class="empty-img" src=" assets/icon/empty_no@3x.png" alt="">
    <p *ngIf="netState===''" class="empty-title">网络繁忙</p>
    <p *ngIf="netState===''" class="empty-sub-title">别紧张，试试看刷新页面</p>
    <p *ngIf="netState === 'No network connection'" class="empty-title">无网络连接</p>
    <p *ngIf="netState === 'No network connection'" class="empty-sub-title">请检查网络设置</p>
    <button class="empty-btn" appDebounceClick (debounceClick)="refreshPage()">刷新</button>  
  </ng-template>
  
  
</ion-content>
<ion-tabs *ngIf="!showRefresh" id="ionTabs" #ionTabs class="tab-bar" (ionTabsDidChange)="change($event)" >
  <div class="unpaidOrders" id="unpaidOrdersId" *ngIf="paymentOrder&&appGlobalService.loginStatus">
    <div class="leftBox">
      <div class="remindBox" appDebounceClick (debounceClick)="fadeClose()">
        <img src="{{paymentOrder.closeIcon}}" class="remindClose"
          onerror="this.src='assets/fw/remind_icon_close.png'" />
      </div>
      <span class="remindFont">{{paymentOrder.title}}</span>
    </div>
    <span class="viewNow" appDebounceClick (debounceClick)="gotoPage(paymentOrder.button?.link)">{{paymentOrder.button?.label}}</span>
  </div>
  <!-- <div class="unpaidOrders" id="unpaidOrdersId">
    <div class="leftBox">
      <div class="remindBox" appDebounceClick (debounceClick)="fadeClose()">
        <img src="assets/fw/remind_icon_close.png" class="remindClose"
          onerror="this.src='assets/fw/remind_icon_close.png'" />
      </div>
      <span class="remindFont">您有1条新的订单需要支付</span>
    </div>
    <span class="viewNow" appDebounceClick (debounceClick)="gotoPage(null)">立即查看</span>
  </div> -->


  <ion-tab-bar #myTabBar id="myTabBar" slot="bottom" appDebounceClick (debounceClick)="goTop($event)" [ngStyle]="appGlobalService.iconTabsCssStyle|styleFilter">
    <ion-backdrop *ngIf="appGlobalService.openBackdrop" style="opacity:0.3; height:100%;" id="main-backdrop"
      (ionBackdropTap)="backdropclick()" [tappable]="appGlobalService.openBackdrop" [visible]="true"
      [stopPropagation]="appGlobalService.openBackdrop" [ngClass]="{'showDrop': !appGlobalService.openBackdrop}">
    </ion-backdrop>
    <ng-container *ngFor="let item of appNavigation; let i=index">

      <ng-container *ngIf="item.type!=='page'">
        <ion-tab-button [disabled]="!item.ifuser" tab="tab{{i+1}}" [selected]="i === 0">
          <ng-container *ngIf="i === 0">
            <img src='assets/icon/{{item.normalIco}}' *ngIf="flag !== 'tab1'" class="img-icon"/>
            <img src='assets/icon/{{item.selectedIco}}' *ngIf="flag === 'tab1'" class="img-icon"/>
            <ion-label [ngClass]="{'label-selected': flag === 'tab1' , 'label-normal': flag !=='tab1'}">{{item.label}}
            </ion-label>
          </ng-container>

          <ng-container *ngIf="i === 1">
            <img src='assets/icon/{{item.normalIco}}' *ngIf="flag !== 'tab2'" class="img-icon" />
            <img src='assets/icon/{{item.selectedIco}}' *ngIf="flag === 'tab2'" class="img-icon" />
            <ion-label [ngClass]="{'label-selected': flag === 'tab2' , 'label-normal': flag !=='tab2'}">{{item.label}}
            </ion-label>
          </ng-container>

          <ng-container *ngIf="i === 2">
            <img src='assets/icon/{{item.normalIco}}' *ngIf="flag !== 'tab3'" class="img-icon"
              [ngClass]="{'img-big': !item.label}" />
            <img src='assets/icon/{{item.selectedIco}}' *ngIf="flag === 'tab3'" class="img-icon"
              [ngClass]="{'img-big': !item.label}" />
            <ion-label [ngClass]="{'label-selected': flag === 'tab3' , 'label-normal': flag !=='tab3'}"
              *ngIf="item.label">{{item.label}}
            </ion-label>
          </ng-container>
          <ng-container *ngIf="i === 3">
            <img src='assets/icon/{{item.normalIco}}' *ngIf="flag !== 'tab4'" class="img-icon" />
            <img src='assets/icon/{{item.selectedIco}}' *ngIf="flag === 'tab4'" class="img-icon" />
            <ion-label [ngClass]="{'label-selected': flag === 'tab4' , 'label-normal': flag !=='tab4'}">{{item.label}}
            </ion-label>
          </ng-container>
          <ng-container *ngIf="i === 4">
            <img src='assets/icon/{{item.normalIco}}' *ngIf="flag !== 'tab5'" class="img-icon" />
            <img src='assets/icon/{{item.selectedIco}}' *ngIf="flag ==='tab5'" class="img-icon" />
            <ion-label [ngClass]="{'label-selected': flag === 'tab5' , 'label-normal': flag !=='tab5'}">{{item.label}}
            </ion-label>
          </ng-container>
          <ng-container *ngIf="item.badge && (item.badge > 99) ">
            <ion-badge class="badge">99+</ion-badge>
          </ng-container>
          <ng-container *ngIf="item.badge && (item.badge > 0)  && (item.badge &lt;= 99) ">

            <ng-container *ngIf="appTypeCustom==='LJ'">
              <!-- 
                <ion-badge id="badgeForTab{{i+1}}" class="badge">&nbsp;</ion-badge> 
              <div class="receive-msg"></div>
              -->
              <ion-badge id="badgeForTab{{i+1}}" class="badge">{{item.badge}}</ion-badge>
            </ng-container>
            <ng-container *ngIf="appTypeCustom!='LJ'">
              <ion-badge id="badgeForTab{{i+1}}" class="badge">{{item.badge}}</ion-badge>
            </ng-container>
          </ng-container>
        </ion-tab-button>
      </ng-container>

      <!--新增图片用于1.9.0 配置type等于page跳转到新的页面-->
      <ng-container *ngIf="item.type==='page'">
        <img [ngStyle]="item.normalIco | styleFilter "
          style=" height: 2.5rem; object-fit: contain; object-position: center;" appDebounceClick (debounceClick)="tabsWillChange($event,item)"
          src="assets/icon/lj_tabbar_icon_release_pre@3x.png" />
      </ng-container>
    </ng-container>
  </ion-tab-bar>

</ion-tabs>